/**
 * Created by BenYip on 2016/5/24.
 */

/**
 * 使用某个 .from-group 调用该方法即可。
 * 必须指定所需上传文件的类型，表明是图片或者是其他文件：
 *      type: ['image’ || 'file' || 'video']
 *
 */
(function ($) {
    $.fn.myFileUpload = function (config) {

        if (typeof config === 'undefined'
            || (config.type !== 'file' && config.type !== 'image' && config.type !== 'video')) {
            console.error('myFileUpload(): 请指定需要上传的文件类型。"type":"file" 或 "type":"image" 或 "type":"video"');
            return false;
        }

        var that = this;

        /*设置config和DOM模板*/
        config = $.extend({}, {
            reqUrl: '请指定上传路径',
            hiddenInputName: '请指定隐藏输入域的name',
            urlPrefix: '请指定文件实际提交的路径前缀',
            urlPreviewPrefix: '请指定文件预览路径前缀'
        }, config);

        var _id = Date.now();
        //保存图片完整路径的隐藏input域
        config._hiddenInputId = 'input-hidden-' + _id;
        //用于AJAX上传的file类型input域
        config._fileInputId = 'ajax-upload-file-' + _id;

        // var template =
        //     '         <input id="<$= _hiddenInputId $>" type="hidden" name="<$= hiddenInputName $>" value="<$= _oldFilePreviewUrl $>">' +
        //     '         <div class="col-xs-3 my-input">' +
        //     '            <label class="ace-file-input" style="margin-top:3px;">' +
        //     '                <input type="file" id="<$= _fileInputId $>" name="file" accept="<$= _acceptType $>">' +
        //     '                <span class="ace-file-container" data-title="选择文件">' +
        //     '                    <span class="ace-file-name" data-title="">' +
        //     '                        <i class=" ace-icon fa fa-upload"></i>' +
        //     '                    </span>' +
        //     '                </span>' +
        //     '                <a class="remove" href="#">' +
        //     '                    <i class=" ace-icon fa fa-times"></i>' +
        //     '                </a>' +
        //     '            </label>' +
        //     '         </div>' +
        //     '         <div class="col-xs-2 progress-holder" style="display: none">' +
        //     '            <div class="progress progress-striped active" style="height: 28px;margin-top: 4px;">' +
        //     '               <div class="progress-bar" style="width: 0%;"></div>' +
        //     '            </div>' +
        //     '         </div>' +
        //     '         <div class="col-xs-2"><$- _previewTemplate $></div>';
        //
        // template =
        //     '<input id="<$= _hiddenInputId $>" type="hidden" name="<$= hiddenInputName $>" value="<$= _oldFilePreviewUrl $>">' +
        //     '<div class="layui-input-inline" style="width: 100px">\n' +
        //     '    <label class="layui-btn" style="position: relative">\n' +
        //     '        选择文件\n' +
        //     '        <input type="file" id="<$= _fileInputId $>" name="file" accept="<$= _acceptType $>" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;">' +
        //     '    </label>\n' +
        //     '</div>\n' +
        //     '<div class="layui-input-inline progress-holder" style="display: none">\n' +
        //     '    <div class="layui-progress layui-progress-big" lay-filter="upload" style="margin-top: 10px;">\n' +
        //     '        <div class="layui-progress-bar" lay-percent="0%"></div>\n' +
        //     '    </div>\n' +
        //     '</div>\n' +
        //     '<div class="layui-input-inline"><$- _previewTemplate $></div>';

        template = '' +
            '<input id="<$= _hiddenInputId $>" type="hidden" name="<$= hiddenInputName $>" value="<$= _oldFilePreviewUrl $>">' +
            '<label for="file">\n' +
            '    选择照片\n' +
            '    <input type="file" id="<$= _fileInputId $>" name="file" accept="<$= _acceptType $>">\n' +
            '</label>\n' +
            '<div class="loading"></div>\n' +
            '<$- _previewTemplate $>';


        config._previewTemplate = '';

        //原文件的所在路径，用于编辑修改时展示
        config._oldFilePreviewUrl = this.data('old-file-url');

        config._uploadSucceeded = function (data) {
            console.log(data);
        };

        config._previewUrlComplete = config._oldFilePreviewUrl ? config.ctxPath + config._oldFilePreviewUrl : '';

        /*针对所选文件类型进行特殊处理*/
        switch (config.type) {

            case 'image':
                //console.log('image upload setting');

                config._acceptType = 'image/*';

                config._colorBoxAnchorId = 'colorBox-anchor-' + _id;    //关联了colorBox的<a>
                config._imgPreviewId = 'img-preview-' + _id;            //放置预览图的<img>
                // config._previewTemplate =
                //     '           <a id="<$= _colorBoxAnchorId $>" href="<$= _previewUrlComplete $>" data-rel="colorbox" ' +
                //     '               style="<$ if(!_oldFilePreviewUrl){ $>' + 'visibility:hidden;' + '<$ } $>">' +
                //     '               <img id="<$= _imgPreviewId $>" src="<$= _previewUrlComplete $>" alt="预览图" style="' +
                //     '                   max-height: 150px;">' +
                //     '           </a>';

                config._previewTemplate = '<img class="selected" id="<$= _imgPreviewId $>" src="<$= _previewUrlComplete $>" alt="preview">';


                config._uploadSucceeded = function (data) {
                    var imgPath = data.filePath;
                    if (imgPath === "error") {
                        alert("请选择图片文件");
                    } else {
                        //显示预览图
                        $('#' + config._imgPreviewId).attr('src', config.urlPreviewPrefix + imgPath);
                        that.find('.selected').css('display', 'block');
                        // $('#' + config._colorBoxAnchorId).attr('href', config.urlPreviewPrefix + imgPath).css('visibility', 'visible');
                        //设置图片的完整路径，用于表单提交
                        $('#' + config._hiddenInputId).attr('value', config.urlPrefix + imgPath);
                    }
                };
                break;
        }

        /*渲染DOM*/
        ejs.delimiter = '$';
        this.append(ejs.render(ejs.render(template, config), config));

        /*jquery.fileUpload 初始化*/
        $('#' + config._fileInputId).fileupload({
            url: config.reqUrl,
            autoUpload: true,
            dataType: 'json', //期望从服务器返回的数据类型
            formData: {'fieldName': 'file'}, //除了文件之外，需要额外发送给服务器的数据
            success: config._uploadSucceeded,
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
                console.log(errorThrown);
            },
            start: function () {
                that.find('.loading').css('display', 'block');
                // .find('.progress-bar').css('width', 0);
                // layui.use(['element'], function () {
                //     layui.element.progress('uploader', '0%');
                // });
            },
            progress: function (e, data) {
                // console.log(data.loaded);
                // that.find('.progress-bar').css('width', parseInt(data.loaded / data.total * 100, 10) + '%');
                // that.find('.layui-progress-bar').css('width', parseInt(data.loaded / data.total * 100, 10) + '%');
            },
            done: function () {
                that.find('.loading').css('display', 'none');
            }
        });
    };
})(jQuery);